<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">我的咨询</view>
		</view>
		<view class="body">
			<view class="" v-for="item, index in questionlist" :key="index">
				<view class="chaseask" v-if="index == 2">
					追问时间:{{ item.time }}
				</view>
				<view class="body-piece" >
					<view class="body-piece-headr">
						<view class="body-piece-headr-icon studentsvg"  v-if="item.type == '问' || item.type == '追问'"></view>
						<view class="body-piece-headr-icon teachersvg"  v-if="item.type == '答' || item.type == '追答'"></view>
						<view class="body-piece-headr-name">{{ item.name }}</view>
						<view class="body-piece-headr-studio">{{ item.studio }}</view>
						<view class="body-piece-footer">
							{{ item.time }}
						</view>
						<view class="body-piece-change">
							<view class="changicon" v-if="item.text2.length > 0"></view>
							<view class="" v-else></view>
						</view>
					</view>
					<view class="body-piece-body" v-if="item.text2.length > 0">
						<view class="decoration" v-for="item2, index2 in item.text2" :key="index2">{{ item.type }}：{{ item2 }}</view>
						<view>{{ item.type }}：{{ item.text }}</view>
					</view>
					<view class="body-piece-body" v-else>
						{{ item.type }}：{{ item.text }}
					</view>
					<view class="body-piece-body"  v-if="item.picture && item.picture.length > 0">
						<!-- <img @click="preview(item3.p1)" v-for="item3,index3 in item.picture" :key="index3" class="body-piece-body-img" :src='item3.p2'> -->
						<el-image
						    style="width: 20vw; height: 20vw;margin: 3vw;"
							v-for="item3, index3 in item.picture" 
							:key="index3"
						    :src="item3.p2"
						    :preview-src-list="[item3.p1]">
						</el-image>
					</view>
					<view class="body-piece-body" v-else></view>
					<view class="body-piece-body"  v-if="item.voice && item.voice.length > 0">
						<view class="voice-body-line"
							
							v-for="item4, index in item.voice"
							:key="index"
						>
							<Voiceplay v-if="isrefresh" :url="item4.url"  :time="item4.duration"></Voiceplay>
							
						</view>
						<!-- <img @click="preview(item3)" v-for="item3,index3 in item.voice" :key="index3" class="body-piece-body-img" :src='item3'> -->
					</view>
					<view class="body-piece-body" v-else></view>
				</view>
			</view>
			<!-- v-if="$store.state.user.myquestion.state==1||$store.state.user.myquestion.state==6" -->
			<view class="questionclosely" v-if="$store.state.user.myquestion.state == 1 || $store.state.user.myquestion.state == 6"  @click="closely()">追问</view>
			<button v-if="isrotate" class="rotatebutton" @click="rotate"></button>
		</view>
		<view class="footer">
			<view class="footer-button" v-if="isasked" @click="evaluationclick()">已了解并评价（{{ time }}）</view>
			<view class="footer-button" v-else @click="returnclick()">返回</view>
		</view>
	</view>
</template>

<script>
	import { getEvaluateEvaluate } from "@/api/mine/index";
	import Voiceplay from '@/components/Voiceplay'
	import { Result } from "element-ui";
	import { handleImageUrl } from "@/utils/common"
	export default {
		components: {
			Voiceplay
		},
		data() {
			return {
				questionlist: [],
				time: '10:00',
				timer: null,
				isasked: false,
				innerAudioContext: null,
				isrefresh: true,
				isrotate: false,
				rotateAngle: 0,
				loading: false,
			}
		},
		mounted() {
			window.addEventListener('mouseup',this.handleonmousedown)
		},
		computed: {
		   // refresh() {
		   //    return this.$store.state.user.refresh
		   // }
		},
		watch: {
			// refresh: {
			// 	immediate: true,
			// 	handler: function(newval) {
			// 		console.log("newval",newval)
			// 		this.Initialize()
			// 	}
			// },
			isaskede(){
				console.log("this.isasked",this.isasked)
			},
			time(i) {
				console.log("i",i)
				console.log("this.time",this.time)
				if(this.time == '0:00'){
					this.isasked = false
				}
			},
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.dealdata()
				let time = this.$store.state.user.myquestion.lastAnswerTime
				if(time){
					this.timeago(time)
				}else{
					this.isasked = false
				}
			},
			handleonmousedown(){
				if(!this.loading){
					this.isrotate = false
				}
			},
			rotate(){
				this.isrotate = true
				let tp = document.getElementsByClassName('image-view-img')[0]
				let angle = this.rotateAngle%4
				if(angle == 0){
					tp.style.transform = 'translate(-50%,-50%) rotate(90deg)'
				}else if(angle == 1){
					tp.style.transform = 'translate(-50%,-50%) rotate(180deg)'
				}else if(angle == 2){
					tp.style.transform = 'translate(-50%,-50%) rotate(270deg)'
				}else if(angle == 3){
					tp.style.transform = 'translate(-50%,-50%)'
				}
				this.rotateAngle+=1
				this.isrotate = true
			},
			voiceplay(data){
				console.log("voiceplay",data)
				var innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.src = data
				innerAudioContext.play()
			},
			dealwidth(data){
				var innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.src = data.url
				innerAudioContext.onCanplay(()=>{
				    var time = innerAudioContext.duration.toFixed(0)
					console.log("time",time)
					data.duration = time-0
					this.isrefresh=false
					this.$nextTick(() => {
						this.isrefresh=true
					})
					return time
				})
			},
			preview(imgUrl){
				this.$modal.loading("加载中，请耐心等待...")
				this.loading = true
				let that = this
				this.isrotate = true
				this.rotateAngle = 0
				let result
				window.URL = window.URL || window.webkitURL;
				var xhr = new XMLHttpRequest();
				xhr.open("get", imgUrl, true);
				xhr.responseType = "blob";
				xhr.onload = function(){
					that.loading = false
					that.$modal.closeLoading()
				    if(this.status == 200){
				        //得到一个blob对象
				        var blob = this.response;
				        console.log("blob", blob)
				        // 至关重要
				        let oFileReader = new FileReader();
				        oFileReader.onloadend = function(e){
				            // 此处拿到的已经是base64的图片了,可以赋值做相应的处理
							result = e.target.result
							uni.previewImage({
								current: 0,
								urls: [result]
							});
				        }
				        oFileReader.readAsDataURL(blob);
				    }
				}
				xhr.send();
			},
			dealpicture(data){
				let list=[]
				if(data!=""&&data!=null){
					list = data.split(';')
				}
				for(let i in list){
					let l = list[i].split('.')
					list[i] = {
						p1: handleImageUrl(list[i]),
						p2: handleImageUrl(list[i], '200x200')
					}
				}
				return list
			},
			async dealdata(){
				console.log("this.$store.state.user.baseUrl",this.$store.state.user.baseUrl)
				console.log("this.$store.state.user.myquestion dealdata",this.$store.state.user.myquestion)
				//问
				this.questionlist=[]
				let data = this.$store.state.user.myquestion
				if(data.state==1||data.state==6){
					this.isasked = true
				}

				
				let vlist=[]
				if(data.questionVoice!=""&&data.questionVoice!=null){
					vlist = data.questionVoice.split(';')
				}
				for(let i in vlist){
					vlist[i] = {
						"duration": 0,
						"url": handleImageUrl(vlist[i])
					}
				}
				this.questionlist.push({
					name:  data.studentName, //学生名
					text: data.question, 
					text2: [], 
					time: data.questionTime, 
					type: '问', 
					studio: '',
					picture: this.dealpicture(data.questionPicture),
					voice: vlist,
				})
				if(data.state=="0"){return}
				//答
				this.$store.state.user.teacherName = data.teacherName
				// list=[]
				// if(data.pictureAnswer!=""&&data.pictureAnswer!=null){
				// 	list = data.pictureAnswer.split(';')
				// }
				// for(let i in list){
				// 	list[i] = this.$store.state.user.baseUrl+list[i]
				// }
				
				vlist=[]
				if(data.voiceAnswer!=""&&data.voiceAnswer!=null){
					vlist = data.voiceAnswer.split(';')
				}
				for(let i in vlist){
					vlist[i] = {
						"duration": 0,
						"url": this.$store.state.user.baseUrl+vlist[i]
					}
				}
				this.questionlist.push({
					name:  data.teacherName, //学生名
					text: data.wordAnswer, 
					text2: [], 
					time: data.answerTime, 
					type: '答', 
					studio: '',
					picture: this.dealpicture(data.pictureAnswer),
					voice: vlist,
				})
				//追问
				let data3 = data.closelyList
				for(let i in data3){		
					// for(let k in list){
					// 	list[k] = this.$store.state.user.baseUrl+list[k]
					// }
					
					vlist = []
					if(data3[i].questionVoice!=""&&data3[i].questionVoice!=null){
						vlist = data3[i].questionVoice.split(';')
					}
					for(let i in vlist){
						vlist[i] = {
							"duration": 0,
							"url": handleImageUrl(vlist[i])
						}
					}
					
					this.questionlist.push({
						name:  data.studentName, //学生名
						text: data3[i].question, 
						text2: [], 
						time: data3[i].questionTime, 
						type: '追问', 
						studio: '',
						picture: this.dealpicture(data.questionPicture),
						voice: vlist,
					})
					//追答
					// list=[]
					// if(data3[i].pictureAnswer!=""&&data3[i].pictureAnswer!=null){
					// 	list = data3[i].pictureAnswer.split(';')
					// }
					// for(let i in list){
					// 	list[i] = this.$store.state.user.baseUrl+list[i]
					// }
					
					vlist=[]
					if(data3[i].voiceAnswer!=""&&data3[i].voiceAnswer!=null){
						vlist = data3[i].voiceAnswer.split(';')
					}
					for(let i in vlist){
						vlist[i] = {
							"duration": 0,
							"url": this.$store.state.user.baseUrl+vlist[i]
						}
					}
					//答
					this.questionlist.push({
						name:  data.teacherName, //学生名
						text: data3[i].wordAnswer, 
						text2: [], 
						time: data3[i].answerTime, 
						type: '答', 
						studio: '',
						picture: this.dealpicture(data.pictureAnswer),
						voice: vlist,
					})
					
					
				}
				console.log("this.questionlist",this.questionlist)
				
				for(let i in this.questionlist){
					console.log("this.questionlist[i]",this.questionlist[i])
					if(this.questionlist[i].voice){
						for(let j in this.questionlist[i].voice){
							this.questionlist[i].voice[j].duration = this.dealwidth(this.questionlist[i].voice[j])
						}
						
					}
				}
				
				
			},
			returnclick(){
				this.$router.push('/pages/mine/index')
			},
			closely(){
				this.$router.push('/pages/mine/startask')
			},
			evaluationclick(){
				this.$router.push('/pages/mine/evaluation')
			},
			timeago(dateTimeStamp){
				dateTimeStamp = new Date(dateTimeStamp).getTime()
				let now = new Date().getTime()
				let time = (now - dateTimeStamp)/1000
				console.log("time1",time)
				if(time<600){
					this.count(600-time)
				}else{
					this.isasked = false
				}
			},
			count(time){
				console.log("time",time)
				//倒计时
				let maxtime = time
				let _this = this
				_this.timer = setInterval(countDown, 1000);     
				function countDown() {
					if (maxtime>= 0) {
						let minutes = Math.floor(maxtime / 60);
						let seconds = Math.floor(maxtime % 60);
						if(seconds<10){ seconds='0'+seconds }
						_this.time=minutes+':'+seconds
						--maxtime
					}else{
						clearInterval(_this.timer);
					}
				}
				
			},
			// refreshall(){
			// 	this.refresh = false
			// 	this.$nextTick(() => {
			// 		this.refresh = true
			// 	})
			// }
		},
		beforeDestroy() {
		    clearInterval(this.timer);        
		    this.timer = null;
		}
	}
</script>

<style>
.container {
	font-size: 4vw;
	background-color: #F6F7F8;
	width: 100vw;
	/* height: 87.3vh; */
	height: 100vh;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	grid-template-rows: 12.5vw 1fr auto;
}

.header {
	width: 100%;
	height: 12.5vw;
	background: #ffffff;
	border: 1px solid #F6F7F8;
	display: grid;
	justify-items: center;
	align-items: center;
	/* grid-template-columns: 1fr; */
	/* grid-template-rows: 1fr 1fr; */
}

.header-title {
	font-size: 5vw;
}

.header-return {
	position: absolute;
	width: 5vw;
	height: 5vw;
	left: 5vw;
	top: 3.5vw;
	background: url(../../static/index/return.svg);
	background-size: 100% 100%;
	cursor: pointer;
}

.body {
	width: 100%;
	height: 100%;
	overflow: auto;
}

.chaseask {
	margin: 4vw auto 0 auto;
	width: 90%;
	height: auto;
	color: #B3B5B9;
	display: grid;
	align-items: center;
}

.body-piece {
	margin: 4vw auto 0 auto;
	padding: 0 0 3vw 0;
	width: 90%;
	min-height: 30vw;
	background: #ffffff;
	border-radius: 2vw;
	display: grid;
	justify-items: start;
	align-items: center;
	grid-template-rows: 15vw auto auto auto auto auto;
}

.body-piece-headr {
	margin: 0 0 0 5%;
	width: 90%;
	display: grid;
	justify-items: start;
	align-items: center;
	grid-column-gap: 1vw;
	grid-template-columns: auto auto auto 1fr auto;
}

.body-piece-headr-icon {
	width: 8vw;
	height: 8vw;
}

.studentsvg {
	background: url(../../static/hot/student.svg);
	background-size: 100% 100%;
}

.teachersvg {
	background: url(../../static/hot/teacher.svg);
	background-size: 100% 100%;
}

.body-piece-headr-name {
	font-weight: 700;
	color: #363A44;
}

.body-piece-headr-studio {
	color: #B3B5B9;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.body-piece-change {}

.changicon {
	width: 5vw;
	height: 5vw;
	background: url(../../static/index/change.png);
	background-size: 100% 100%;
}

.body-piece-body {
	margin: 0 0 0 5%;
	width: 90%;
	color: #515257;
}

.body-piece-body-img {
	margin: 2vw;
	width: 20vw;
	height: 20vw;
}

.decoration {
	text-decoration: line-through
}

.questionclosely {
	float: right;
	margin: 5vw 5vw 0 0;
	width: 16vw;
	height: 8vw;
	border-radius: 4vw;
	color: #ffffff;
	background: #1492FF;
	display: grid;
	justify-items: center;
	align-items: center;
	cursor: pointer;
}

.body-piece-footer {
	display: grid;
	justify-items: end;
	align-items: center;
	width: 100%;
	color: #B3B5B9;
	font-size: 3.6vw;
}

.footer {
	width: 100%;
	height: 100%;
	display: grid;
	justify-items: center;
	align-items: center;
}

.footer-button {
	margin: 1vw 0 1vw 0;
	width: 95vw;
	height: 10vw;
	border-radius: 5vw;
	color: #ffffff;
	background: #00B578;
	display: grid;
	justify-items: center;
	align-items: center;
	cursor: pointer;
}

.voice-body-line {
	margin: 2vw 0;
	width: 87vw;
	height: 10vw;
	display: grid;
	justify-items: start;
	align-items: center;
	grid-template-columns: auto 1fr auto;
}

.voice-body-piece {
	padding: 0 2vw;
	height: 10vw;
	border-radius: 5vw;
	background: #DCEDFF;
	display: grid;
	justify-items: start;
	align-items: center;
	grid-column-gap: 2vw;
	grid-template-columns: auto auto 1fr;
	cursor: pointer;
}

.voice-delete {
	float: right;
	width: 3vw;
	height: 3vw;
	background: url(../../static/index/delete.png);
	background-size: 100% 100%;
}

.recordicon {
	width: 5vw;
	height: 5vw;
	background: url(../../static/index/record.png);
	background-size: 100% 100%;
}

.rotatebutton {
	position: absolute;
	top: 3vw;
	left: 45vw;
	z-index: 99999;
	color: #ffffff;
	background: url(../../static/mine/redo.svg);
	background-size: 100% 100%;
	width: 6vw;
	height: 6vw;
	cursor: point;
}
</style>